<template>
    <div class="DepartmentUser">
        <MyDialog :model-value="true" :type="DialogType.C2" title="管理用户" @close="onClose">
            <DataTable ref="DepartmentUserDataTableRef" divHeight="calc(100vh - 460px)" :row-config="{ useKey: true }" :checkbox-config="{ trigger: 'row' }" :data="list" autoIDFieldName="departmentUserID" :hasInput="false" :hasAdd="false" :hasFilter="false" :hasSearch="false" :hasPager="false">
                <vxe-column title="姓名" field="name" min-width="120" show-overflow></vxe-column>
                <vxe-column title="邮箱" field="email" min-width="120" show-overflow></vxe-column>
                <vxe-column title="手机号" field="phone" min-width="120" show-overflow></vxe-column>

                <!-- 顶部右侧按钮 -->
                <template #rightBtn>
                    <el-button-group>
                        <el-button v-if="true" type="primary" @click="onOpenAddUser">添加</el-button>
                        <el-button v-if="true" type="danger" @click="onDelUser">删除</el-button>
                    </el-button-group>
                </template>
            </DataTable>

            <UserSelect v-if="isShowUserSelect" @close="onCloseAddUser" :defaultFilter="userFilter"></UserSelect>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import { DialogType } from "@/_gx/TsEnums";
import { TipsType } from "@/_gx/TsEnums";
import UserSelect from "../User/UserSelect.vue";

//表格的数据
const list = ref([]);

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

//定义filter对象
const userFilter = ref<any>({});
//定义显示对话框变量
const isShowUserSelect = ref(false);

//初始化
const Init = () => {
    GetData();
};

//得到表格数据
const GetData = () => {
    App.CallApi(Api.User.GetUserListByDepartmentID(rowAutoID.value), {
        success: (res) => {
            list.value = res;
        },
    });
};

//打开用户选择
const onOpenAddUser = () => {
    isShowUserSelect.value = true;
    userFilter.value._NotUserIDs = list.value.map((x) => x.userID);
};

//关闭用户选择
const onCloseAddUser = (selectData) => {
    isShowUserSelect.value = false;

    if (!Gx.IsEmpty(selectData)) {
        let _data = selectData.map((x) => {
            return {
                userID: x.userID,
                departmentID: rowAutoID.value,
            };
        });

        App.CallApi(Api.DepartmentUser.BatchInsert, {
            data: _data,
            success: () => {
                GetData();
            },
        });
    }
};

//定义DataTable的Ref对象
const DepartmentUserDataTableRef = ref(null);

//删除现有用户
const onDelUser = () => {
    let _ids = DepartmentUserDataTableRef.value.GetSelectProp();

    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要删除选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.DepartmentUser.BatchDelete, {
                data: _ids,
                success: () => {
                    GetData();
                },
            });
        },
    });
};

//关闭
const onClose = () => {
    emits("close");
};

const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>
